<template>
  <div class="justified">
    <el-tooltip
        :content="field.label"
        placement="bottom"
        effect="dark"
        popper-class="m-table-tooltip"
        :hide-after="0"
        :show-after="0"
        transition="none"
        :enterable="false">
      <el-text
          style="cursor: pointer; "
          @click.prevent="emits('search', $event, field)"
          @contextmenu.prevent="emits('meta', $event, field)"
          truncated
      >{{ field.label }}
      </el-text>
    </el-tooltip>
    <el-button link size="small" type="info">
      <fa icon="sort"/>
    </el-button>
  </div>
</template>

<script setup lang="ts">

import type {MetaField, MetaView} from "../../types/ui.types";

const emits = defineEmits(['search', 'meta', 'order']);
const props = defineProps<{
  view: MetaView
  field: MetaField;
  order?: object;
}>()

</script>

<style scoped>

</style>